{{ if .Site.Data.content.Experience }}
<div id="experience" class="section">
    <div class="section__heading">
        <h2 class="section__title">Experience</h2>
    </div>
    <div class="section__content">
        <div class="experience">
            {{ range .Site.Data.content.Experience }}
            <div class="experience__item">
                <div class="experience__header">
                    <h3 class="experience__company">
                        {{ .Employer | safeHTML }}
                    </h3>
                    <h3 class="experience__place">{{ .Place | safeHTML }}</h3>
                </div>
                {{ range .Positions }}
                <div class="experience__job">
                    <div class="experience__subheader">
                        <h3 class="experience__position">
                            {{ .Title | safeHTML}}
                        </h3>
                        <h3 class="experience__date">{{ .Date | safeHTML }}</h3>
                    </div>
                    <ul>
                        {{ range .Details }}
                        <li class="experience__bullet">{{ . }}</li>
                        {{ end }}
                    </ul>
                    <div class="experience__badges">
                        <ul>
                            {{ range .Badges }}
                            <li class="experience__badge">{{ . }}</li>
                            {{ end }}
                        </ul>
                    </div>
                </div>
                {{ end }}
            </div>
            {{ end }}
        </div>
    </div>
</div>
{{ end }}
